<template>
	<div class="sign-course-pay">
    <div class="page5">
      <div class="top-banner"></div>
      <div class="qr-code">
        <img :src="item" v-for="(item, index) in payImgArr" :key="index">
      </div>
      <div class="contract">
        <div class="contract-top">
          <p><span>课程：</span><em>{{ ruleForm.courseId }}</em></p>
          <p><span>课程类型：</span><em>{{ ruleForm.courseType === 1 ?'私教课' : '自由练' }}</em></p>
          <p v-if="ruleForm.courseType === 1"><span>课程模式：</span><em>{{ setCourseMode(ruleForm.courseMode) }}</em></p>
          <p v-if="ruleForm.courseType === 1"><span>课程时长：</span><em>{{ ruleForm.courseTimes }}分钟</em></p>
          <p><span>销售模式：</span><em>{{ ruleForm.saleMode === 0 ?'按次' : '包时' }}</em></p>
          <p><span>购买数量：</span><em>{{ ruleForm.buyCount }}{{ ruleForm.saleMode === 0 ?'节' : '天' }}</em></p>
          <p><span>支付金额：</span><em>{{ ruleForm.payMoney }}元</em></p>
          <p v-if="ruleForm.courseType === 1"><span>每日约课限制：</span><em>{{ ruleForm.maxAttendClassOneDay }}节</em></p>
          <p v-if="ruleForm.courseType === 1"><span>允许约课时间：</span><em>{{ ruleForm.allowAttendClassStartTime }} - {{ ruleForm.allowAttendClassEndTime }}</em></p>
          <p v-if="ruleForm.courseType === 0 && saleModeIndex === 0"><span>最大门禁容错时间：</span><em>{{ ruleForm.maxFaultTolerantTime }}分钟</em></p>
          <p v-if="saleModeIndex === 0"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }} {{ ruleForm.expirationDays }} 天</em></p>
          <p v-if="saleModeIndex === 1"><span>课程有效期：</span><em>{{ ruleForm.expirationType === 0 ? '购买后' : '首节课后' }} 至包时结束</em></p>
          <p><span>成交教练：</span><em>{{  ruleForm.signCoachUserIdList }}</em></p>
          <p><span>授课教练：</span><em>{{ ruleForm.teachCoachUserIdList }}</em></p>
          <p><span>协议：</span><em>{{ ruleForm.protocolConfigId }}</em></p>
        </div>
      </div>
      <div class="footer" v-if="userInfo.roleCode">
        <span class="pre-step" @click="comfirmPay">确认支付</span>
      </div>
    </div>
	</div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import { signGet, getPayQr, confirmPayment } from '@/api/manageApi'
	export default {
		data() {
			return {
        more: 'more',
        rateValue: 5,
        tabArr: [
          '课程签约信息',
          '协议'
        ],
        recIndex: 0,
        interval: 2000,
        duration: 500,
				scrollHeight: 200,
        scrollLeft: 0,
        protocolDetail: {},
        coachArr: [],
        protocolArr: [],
        payImgArr: [],
        ruleForm: {
          courseId: '',
          courseType: '',
          courseMode: '',
          courseTimes: '',
          buyCount: '',
          payMoney: '',
          maxAttendClassOneDay: '',
          maxFaultTolerantTime: '',
          allowAttendClassStartTime: '',
          allowAttendClassEndTime: '',
          expirationType: '',
          expirationDays: '',
          signCoachUserIdList: [],
          teachCoachUserIdList: [],
          protocolConfigId: '',
          memberUserIdList: [
            {
              phone: '',
              userName: '',
              gender: 1,
              idCard: '',
              emergencyContact: '',
              emergencyContactPhone: ''
            },
            {
              phone: '',
              userName: '',
              gender: 1,
              idCard: '',
              emergencyContact: '',
              emergencyContactPhone: ''
            }
          ]
        },
        signId: ''
			}
    },
    computed:{
			...mapGetters(['uniToken', 'userInfo'])
		},
		onLoad (option) {
      this.getCourseDetail(option.id)
      this.signId = option.id
      this.getPayQrImg()
    },
		methods: {
      setCourseMode (val) {
        if (val === 1) {
          return '1对1'
        } else if(val === 2) {
          return '1对2'
        } else {
          return ''
        }
      },
      comfirmPay () {
        this.uShowModel('确认', '确定要确认支付吗', () => {
          var params = {
            signCourseId: this.signId
          }
          confirmPayment(params).then(res => {
            this.uShowToast(res.msg)
          })
        })
      },
      getPayQrImg () {
        getPayQr().then(res => {
          this.payImgArr = res.data
        })
      },
      getCourseDetail (val) {
        var params = {
          id: val
        }
        signGet(params).then(res => {
          console.log(res)
          if (res.code == 200) {
            var data = res.data
            this.$set(this.ruleForm, 'courseId', data.courseSnapshot.courseName)
            this.$set(this.ruleForm, 'courseType', data.courseSnapshot.courseType)
            this.$set(this.ruleForm, 'courseMode', data.courseSnapshot.courseMode)
            this.$set(this.ruleForm, 'courseTimes', data.courseSnapshot.courseTimes)
            this.$set(this.ruleForm, 'saleMode', data.saleMode)
            this.$set(this.ruleForm, 'buyCount', data.buyCount)
            this.$set(this.ruleForm, 'payMoney', (data.payMoney/100).toFixed(2))
            this.$set(this.ruleForm, 'maxAttendClassOneDay', data.maxAttendClassOneDay)
            this.$set(this.ruleForm, 'maxFaultTolerantTime', data.maxFaultTolerantTime)
            this.$set(this.ruleForm, 'allowAttendClassStartTime', data.allowAttendClassStartTime)
            this.$set(this.ruleForm, 'allowAttendClassEndTime', data.allowAttendClassEndTime)
            this.$set(this.ruleForm, 'expirationType', data.expirationType)
            this.$set(this.ruleForm, 'expirationDays', data.expirationDays)
            var signCoachUsers = []
            if (data.signCoachUsers) {
              data.signCoachUsers.forEach((item, index) => {
                signCoachUsers.push(item.userName)
              })
            }
            this.$set(this.ruleForm, 'signCoachUserIdList', signCoachUsers.join())
            var teachCoachUsers = []
            if (data.teachCoachUsers) {
              data.teachCoachUsers.forEach((item, index) => {
                teachCoachUsers.push(item.userName)
              })
            }
            this.$set(this.ruleForm, 'teachCoachUserIdList', teachCoachUsers.join())
            if(data.protocolConfigSnapshot){
              this.$set(this.ruleForm, 'protocolConfigId', data.protocolConfigSnapshot.protocolName)
              this.isDisableProtocol = true
            }else{
              this.isDisableProtocol = false
              this.$set(this.ruleForm, 'protocolConfigId', '')
            }
            
            this.$set(this.ruleForm, 'memberUserIdList', data.userMembers)
            this.$set(this.ruleForm, 'remainCount', data.remainCount)
          }
        })
      }
		}
	}
</script>

<style lang="scss">
.sign-course-pay{
  // padding-top: 160rpx;
  padding-bottom: 300rpx;
  .page1{
    width: 702rpx;
    margin: 0 auto;
  }
  h1{
    font-weight: 400;
    font-size: 30rpx;
    color: #575757;
    margin: 31rpx 0 24rpx;
  }
  .radio-sale{
    width: 702rpx;
    height: 128rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 24rpx 28rpx;
    box-sizing: border-box;
    .radio1{
      width: 308rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: url('../../static/s1.png') no-repeat 0 0;
      background-size: cover;
      display: inline-block;
      text-align: center;
      margin-right: 30rpx;
    }
    .radio2{
      width: 308rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: url('../../static/s2.png') no-repeat 0 0;
      background-size: cover;
      display: inline-block;
      text-align: center;
    }
  }
  .list-course{
    width: 100%;
    li{
      width: 100%;
      // height: 294rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 30rpx 28rpx;
      margin-top: 24rpx;
      position: relative;
      .course-body{
        display: flex;
        .cover{
          width: 220rpx;
          height: 174rpx;
          line-height: 174rpx;
          background: #fafafa;
          border-radius: 15rpx;
          margin-right: 20rpx;
          img{
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
          }
        }
        .course-info{
          font-size: 24rpx;
          color: #838383;
          line-height: 50rpx;
          h4{
            margin-top: 10rpx;
            margin-bottom: 6rpx;
            font-size: 30rpx;
            color: #1E1E1E;
          }
        }
      }
    }
    li.active::after{
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 52rpx;
      height: 52rpx;
      display: inline-block;
      background: url('../../static/s3.png') no-repeat 0 0;
      background-size: cover;
    }
  }
  .footer{
    width: 750rpx;
    height: 128rpx;
    background: #FFFFFF;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0rpx;
    span{
      margin-top: 24rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      display: inline-block;
      border-radius: 40rpx;
      background: #FF5D3D;
      font-size: 32rpx;
      color: #FFFFFF;
    }
    .next{
      width: 646rpx;
    }
    .pre-step{
      width: 328rpx;
      background: #FFFFFF;
      border: 1px solid #FF5A20;
      color: #FF5A20;
      margin-right: 30rpx;
      // position: fixed;
      // left: 0;
      // bottom: 0;
    }
    .next-step{
      width: 328rpx;
    }
  }
  .page2, .page3, .page4, .page5{
    h1{
      text-indent: 34rpx;
    }
    .sec-title{
      width: 750rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-indent: 31rpx;
      position: relative;
      background: #fff;
      border-bottom: 1px solid #eee;
      span{
        display: inline-block;
        width: 180rpx;
        height: 48rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        border: 1px solid #FFBF40;
        line-height: 48rpx;
        text-align: center;
        font-size: 22rpx;
        color: #F6A51F;
        position: absolute;
        right: 32rpx;
        top: 26rpx;
        text-indent: 0rpx;
      }
    }
  }
  .fr{
		float: right;
	}
	.micon-1{
		width: 10rpx;
		height: 18rpx;
		display: inline-block;
		background: url(../../static/right2.png) no-repeat 0 0;
		background-size: cover;
		margin-left: 20rpx;
	}
  .list-base{
    margin-bottom: 24rpx;
    li{
      width: 750rpx;
      height: 100rpx;
      background: #FFFFFF;
      line-height: 100rpx;
      font-size: 30rpx;
      color: #1E1E1E;
      padding: 0 32rpx;
      box-sizing: border-box;
      p{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      span{
        font-size: 28rpx;
        color: #1E1E1E;
        display: inline-block;
        width: 176rpx;
        margin-right: 10rpx;
      }
      .uni-input{
        width: 420rpx;
        font-size: 28rpx;
        color: #838383;
        text-align: right;
      }
      em{
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #838383;
      }
    }
  }
  .contract{
    width: 702rpx;
    // height: 1034rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin: 0 auto;
    .contract-top{
      padding: 40rpx 31rpx;
      line-height: 58rpx;
      border-bottom: 1px solid #eee;
      p{
        display: flex;
      }
      span{
        width: 200rpx;
        margin-right: 49rpx;
        display: inline-block;
        font-size: 28rpx;
        color: #838383;
        display: inline-block;
      }
      em{
        font-size: 28rpx;
        color: #1E1E1E;
      }
    }
    .contract-bottom{
      padding: 38rpx 20rpx;
      h4{
        font-weight: 400;
        font-size: 28rpx;
        color: #838383;
        margin-bottom: 15rpx;
      }
      .member{
        width: 662rpx;
        height: 286rpx;
        background: #F7F7F7;
        border-radius: 20rpx;
        padding: 42rpx 28rpx;
        box-sizing: border-box;
        line-height: 58rpx;
        p{
          display: flex;
        }
        span{
          width: 160rpx;
          display: inline-block;
          margin-right: 80rpx;
          font-size: 28rpx;
          color: #838383;
        }
        em{
          font-size: 28rpx;
          color: #1E1E1E;
        }
      }
    }
  }
  .page5{
    .contract{
      margin-top: 24rpx;
      .contract-top{
        border-bottom: none;
      }
    }
    .top-banner{
      width: 702rpx;
      height: 60rpx;
      margin: 24rpx auto 0;
      background: url('../../static/s4.png') no-repeat 0 0;
      background-size: cover;
    }
    .qr-code{
      width: 702rpx;
      height: 402rpx;
      background: #FFFFFF;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        max-width: 234rpx;
        margin-right: 40rpx;
        max-height: 318rpx;
      }
    }
  }
}
</style>
